<template>
  <el-card shadow="never" :body-style="{ padding: '20px' }">
  <div class="header f-jc-sb">
    <h3 class="xl m-b-20">我的项目</h3>
    <div class="right">
      <el-button type="primary" size="default" icon="plus">新建项目</el-button>
    </div>
  </div>
  <div class="actionPart m-b-10 f-jc-sb">
    <div class="left">
      <span class="total">共 {{ 1 }} 条</span>
      <el-input v-model="data.briefName" class="m-l-10" style="width: 180px;" placeholder="请输入项目名称" clearable/>
      <el-select
        v-model="data.status"
        placeholder="状态"
        style="width: 180px"
        class="m-l-10"
      >
        <el-option
          v-for="item in 5"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select
        v-model="data.status"
        placeholder="关联客户"
        class="m-l-10"
        style="width: 180px"
      >
        <el-option
          v-for="item in 5"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select
        disabled
        v-model="data.status"
        class="m-l-10"
        placeholder="关联合同"
        style="width: 180px"
      >
        <el-option
          v-for="item in 5"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select
        v-model="data.status"
        placeholder="全部"
        class="m-l-10"
        style="width: 180px"
      >
        <el-option
          v-for="item in 5"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-button plain class="m-l-10"><i class="remove"></i></el-button>
      
    </div>
    <div class="right f-ali-c">
      <el-button type="info" size="small" text><i class="descending"></i></el-button>
      
    </div>
  </div>
  <div class="tablePart">
    <common-table :tableColumn="data.tableColumn" :tableData="data.tableData">
      <template #icon="{row}">
        <div class="content f-ali-c">
          <i class="avatar m-r-10"></i>
          <span>{{ row.projectLeader }}</span>
        </div>
      </template>
      <template #tag="{row}">
        <el-tag type="primary" effect="plain">{{ row.status }}</el-tag>
      </template>
    </common-table>
  </div>
  </el-card>
  

</template>

<script lang="ts" setup>
import { reactive } from 'vue';

const data = reactive({
  tableData: [
  {
      projectId: '11',
      projectName: '11',
      projectLeader: '11',
      status: '11',
      planStart: '11',
      planEnd: '11',
      todoOfTotal: '11',
    },
    {
      projectId: '11',
      projectName: '11',
      projectLeader: '11',
      status: '11',
      planStart: '11',
      planEnd: '11',
      todoOfTotal: '11',
    },
    {
      projectId: '11',
      projectName: '11',
      projectLeader: '11',
      status: '11',
      planStart: '11',
      planEnd: '11',
      todoOfTotal: '11',
    }
  ],
  tableColumn: [
  {label: '项目编号', prop: 'projectId', type: 'default', width: '100px', align: 'start', template: 'text'},
  {label: '项目名称', prop: 'projectName', type: 'default', align: 'start', template: 'text'},
  {label: '状态', prop: 'status', type: 'default', width: '150px', align: 'start', template: 'tag'},
  {label: '负责人', prop: 'projectLeader', type: 'default', width: '150px', align: 'start', template: 'icon'},
  {label: '计划开始', prop: 'planStart', type: 'default', width: '150px', align: 'start', template: 'text'},
  {label: '计划结束', prop: 'planEnd', type: 'default', width: '150px', align: 'start', template: 'text'},
  {label: '未完成/总任务数', prop: 'todoOfTotal', type: 'default', width: '200px', align: 'start', template: 'text'},
  ],
  briefName: '',
  status: '',
  stausList: [],
  time: []
})
</script>

<style lang="scss" scoped>
.header {
  .right {
    ::v-deep .moreAction {
      padding: 7px;
      border: 1px solid #9fa0a2;

      &:hover {
        background-color: transparent;
      }
    }
    .more {
      content: url('@/assets/images/more.svg');
    }
  }
}
.actionPart {
  .left {
    .remove {
      content: url('@/assets/images/remove.svg');
    }
  }
  .right {
    ::v-deep .el-button {
      margin: 0;
      padding-left: 0;
    }

    .filter {
      content: url('@/assets/images/filter.svg');
    }

    .descending {
      content: url('@/assets/images/descending.svg');
    }
  }
}
.tablePart {
  .avatar {
    content: url('@/assets/images/avatar.svg');
  }
}
</style>